<template>
  <div class="cart">
    <div class="cart-header">
      <div class="header-back" @click="backFun">
        <img src="../assets/imgs/left.png" alt />
      </div>
      <div class="header-title">购物车</div>
      <div class="share">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
    <!-- <happy-scroll color="aqua" size="5"> -->
    <div class="cart-address">
      <div class="address">
        <img src="../assets/imgs/address.png" alt />
        <div class="address-text">朝阳区三环到五环之间</div>
      </div>
      <span class="redact">编辑商品</span>
    </div>
    <div class="cart-login">
      登录后可同步账户购物车的商品
      <div class="cart-login-btn btn-red">登录</div>
    </div>
    <div class="cart-list">
      <div class="cart-item" v-for="(item,index) in testArr" :key="index">
        <div class="item-check">
          <input
            type="checkbox"
            class="yuan"
            v-model="item.checked"
            @change="checkFun(item,$event)"
          />
        </div>
        <div class="item-img">
          <img :src="'http://localhost:2468/uploads/'+item.imgs" alt />
        </div>
        <div class="item-detail">
          <div class="item-title">{{item.title}}</div>
          <div class="item-vertion">{{item.vertion}}</div>
          <div class="item-price">
            <div class="price">
              ￥
              <span style="font-size: 0.2rem;">{{item.price}}</span>.00
            </div>
            <div class="item-num">
              <button @click="changeNum(item,'dec',index)" :disabled="item.num==1">-</button>
              <input type="text" v-model="item.num" />
              <button @click="changeNum(item,'inc',index)">+</button>
            </div>
          </div>
          <div class="item-footer">
            <span class="item-del">删除</span>
          </div>
        </div>
      </div>
    </div>
    <div class="cart-line">
      <span class="line-text">可能你还要</span>
    </div>
    <div class="ran-list">
      <ul class="ran-lis">
        <li v-for="(item,index) in testLis" :key="index">
          <div class="ran-lis-img">
            <img :src="'http://localhost:2468/uploads/'+item.imgs" alt />
          </div>
          <div class="ran-lis-title">{{item.title}}</div>
          <div class="ran-lis-price">
            <div class="lis-price">
              ￥
              <span>{{item.price}}</span>
            </div>
            <div class="lis-cart">
              <img src="../assets/imgs/cart.png" alt />
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="cart-foot">
      <div class="foot-left">
        <label for>
          <input type="checkbox" v-model="allCheck" @change="allChange" />
          <span>全选</span>
        </label>
      </div>
      <div class="foot-right">
        <div class="total-price">
          <span>总计</span>
          <span>￥{{totalPrice}}.00</span>
        </div>
        <div class="sum-order btn-red" @click="summitFun">
          去结算
          <span class="num">({{totalNum}}件)</span>
        </div>
      </div>
    </div>
    <!-- </happy-scroll> -->
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
import {removeCart} from '../utils/cart'
export default {
  data() {
    return {
      allCheck: null
    };
  },
  computed: {
    ...mapState("cart", ["testArr", "testLis", "totalNum", "totalPrice"])
  },
  methods: {
    ...mapActions("cart", ["getRanList", "getList", "addOrder"]),
    ...mapMutations("cart", [
      "SET_ALLPRICE",
      "SET_ALLNUM",
      "SET_LIST",
      "ALL_CHANGE"
    ]),
    backFun() {
      this.$router.go(-1);
    },
    changeNum(item, val, index) {
      if (val == "inc") {
        item.num++;
      } else {
        item.num--;
      }
      let obj = { ...item };
      this.SET_ALLNUM(this.testArr);
      this.SET_ALLPRICE(this.testArr);
    },
    checkFun(item, e) {
      console.log(item);
      item.checked = e.target.checked;
      this.SET_ALLNUM(this.testArr);
      this.SET_ALLPRICE(this.testArr);
      this.allChecked();
      // console.log(this.totalNum)
    },
    //全选
    allChange(e) {
      this.allCheck = e.target.checked;
      this.testArr.map(val => (val.checked = this.allCheck));
      this.SET_ALLNUM(this.testArr);
      this.SET_ALLPRICE(this.testArr);
    },
    //提交
    async summitFun() {
      let arr = this.testArr.filter(val => val.checked == true);
      let obj = {
        orderDetail: JSON.stringify(arr),
        total: this.totalPrice,
        orderTime: new Date().toLocaleDateString(),
        status: 0
      };
      await this.addOrder(obj);
      removeCart()
      this.$router.push('/')
    },
    allChecked() {
      let len = this.testArr.filter(val => val.checked == true).length;
      this.allCheck = len == this.testArr.length;
    }
  },
  async mounted() {
    await this.getList();
    this.allChecked();
    this.getRanList();
  }
};
</script>

<style scoped src="@/assets/css/cart.css">
</style>